import styles from './index.less';
import './index.less';
import { Menu, Button, Layout, Breadcrumb } from 'antd';
import React from 'react';
import {
  ProgramPage,
  OtherCostPage,
  ProgramDetailPage,
  RentCostPage,
  RentDetailPage
} from './index.d';
import ProgramDetailComponent from '@/components/detail/ProgramDetailComponent'
import { Route, Switch } from 'react-router-dom'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DesktopOutlined,
  LaptopOutlined,
} from '@ant-design/icons';
import { useState } from 'react';
// import { Link } from 'react-router-dom';
import { useHistory } from 'react-router';
import { Link } from 'umi';
// import {RouteComponentProps} from '@types/react-router/index.d'
// import { Link } from 'react-router-dom';
// import router from 'react-router';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const routes = [
  {
    path: '/',
    breadcrumbName: 'home',
    children: [
      {
        path: '/program',
        breadcrumbName: 'program',
      },
      {
        path: '/labor',
        breadcrumbName: 'labor',
      },
      {
        path: '/materials',
        breadcrumbName: 'materials',
      },
      {
        path: '/equipment',
        breadcrumbName: 'equipment',
      },
      {
        path: '/content',
        breadcrumbName: 'content',
      }
    ],
  }
];
enum SideType {
  DETAIL,
  COST
}

interface SideItem {
  name: string,
  path: string,
  filter?: boolean,
  type?: SideType
}

const index = () => {
  const history = useHistory();
  const [collapsed, setCollapsed] = useState(false);
  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  }

  const sideItems: SideItem[] = [
    {
      name: "项目信息",
      path: "/page/program",
      type: SideType.DETAIL,
    },
    {
      name: "其他花费",
      path: "/page/other-cost",
      type: SideType.COST,
    },
    {
      name: "项目详情组件",
      path: "/page/program-detail-component",
      filter: true,
      // type:SideType.DETAIL
    },
    {
      name: "项目详情",
      path: "/page/program-detail",
      type: SideType.DETAIL,
    },
    {
      name: "租赁花费",
      path: "/page/rent-cost",
      type: SideType.COST,
    },
    {
      name: "租赁详情",
      path: "/page/rent-detail",
      type: SideType.DETAIL,
    },
  ]

  function itemRender(route: any, params: any, routes: any, paths: any) {
    const last = routes.indexOf(route) === routes.length - 1;
    return last ? (
      <span>{route.breadcrumbName}</span>
    ) : (
      <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
    );
  }
  return (
    <div className="ant-layout-self">
      <Layout>
        <Header className="header">
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" onClick={toggleCollapsed}>
              {/* <Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 16 }}> */}
              {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
              {/* </Button> */}
            </Menu.Item>
            {/* <Menu.Item key="2">nav 2</Menu.Item> */}
          </Menu>
        </Header>
        <Layout>
          <Sider width={200} className="site-layout-background" collapsed={collapsed}>
            <Menu
              mode="inline"
              // defaultSelectedKeys={['1']}
              // defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              <SubMenu icon={<DesktopOutlined />} title="详情" key="subMenu1">
                {
                  sideItems.map((item, _index) => {
                    if ((item.filter ?? false) || (item.type ?? SideType.DETAIL) != SideType.DETAIL) {
                      return;
                    }
                    return (
                      <Menu.Item onClick={() => { history.push(item.path) }}
                        key={_index}
                      >
                        <span>{item.name}</span>
                      </Menu.Item>)
                  })
                }
              </SubMenu>
              <SubMenu icon={<LaptopOutlined />} title="花费" key="subMenu2">
                {
                  sideItems.map((item, _index) => {
                    if ((item.filter ?? false) || (item.type ?? SideType.DETAIL) != SideType.COST) {
                      return
                    }
                    return (
                      <Menu.Item onClick={() => { history.push(item.path) }}
                        key={_index}
                      >
                        <span>{item.name}</span>
                      </Menu.Item>)
                  })
                }
              </SubMenu>
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Breadcrumb itemRender={itemRender} routes={routes} ></Breadcrumb>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
              }}
            >
              <Switch>
                <Route exact path="/page/program" component={ProgramPage}></Route>
                <Route exact path="/page/other-cost" component={OtherCostPage}></Route>
                <Route exact path="/page/program-detail-component" component={ProgramDetailComponent}></Route>
                <Route exact path="/page/program-detail" component={ProgramDetailPage}></Route>
                <Route exact path="/page/rent-cost" component={RentCostPage}></Route>
                <Route exact path="/page/rent-detail" component={RentDetailPage}></Route>
              </Switch>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div >);
}
export default index;